import React, {useEffect} from 'react';
import {View, Text, TouchableOpacity, ScrollView, Image} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import AreaView from '../../components/Layout/AreaView';
import styles from './style';
import Tabs from '../../components/Tabs';
import SearchHeadIcon from '../../components/SearchHeadIcon';

const MyInvoice = () => {
  const navigation = useNavigation();
  useEffect(() => {
    navigation.setOptions({
      title: '我的发票',
      // headerRight: () => <SearchHeadIcon />,
    });
  }, [navigation]);
  const dataSource = [
    {name: '全部', id: 0},
    {name: '未开发票', id: 1},
    {name: '已开发票', id: 2},
    {name: '抬头管理', id: 3},
  ];
  return (
    <AreaView>
      <View style={styles.box}>
        <Tabs dataSource={dataSource} />
        <ScrollView style={styles.container}>
          <TouchableOpacity  activeOpacity={1} activeOpacity={1}>
            <View style={styles.list}>
              <View style={styles.video}>
                <Image style={styles.cover} />
                <Image
                  source={require('../../assets/images/video_stop.png')}
                  style={styles.icon}
                />
              </View>
              <View style={styles.info}>
                <View style={styles.title_container}>
                  <Text numberOfLines={1} style={styles.title}>
                    课程名称名称课程名称名称课程名称名称课程名称名称课程名称名称课程名称名称课程名称名称
                  </Text>
                  <Text style={styles.btn_text_shop}>未开票</Text>
                </View>
                <Text style={styles.time}>直播2课时 时长30分钟/次</Text>
                <Text style={styles.money}>￥2888</Text>
              </View>
            </View>
            <View style={styles.action}>
              <TouchableOpacity
                style={styles.btn}
                onPress={() => {
                  navigation.push('InvoiceDetail');
                }}>
                <Text style={styles.btn_text}>查看发票</Text>
              </TouchableOpacity>
            </View>
          </TouchableOpacity>
        </ScrollView>
      </View>
    </AreaView>
  );
};

export default MyInvoice;
